<template>
  <div>
    <ul>
      <li v-for="item in dataArr" :key="item.id" class="topic">
        <img v-lazy="item.scene_pic_url" alt="">
        <h4>{{item.title}}</h4>
        <p>{{item.subtitle}}</p>
        <p class="price">{{item.price_info|money}}</p>
      </li>
    </ul>
    <!-- 分页 -->
    <van-pagination v-model="page" :page-count="pageCount" mode="simple" @change="changePage" />
  </div>
</template>

<script>
//导入接口数据
import {getTopicData} from '@/utils/http'


export default {
  name: "Topic",
  props: [""],
  data() {
    return {
      page:1,//默认页数
      size:10,//单页条数
      dataArr:[],//当前页面数据
      pageCount:0,
    };
  },

  components: {},

  computed: {},

  created() {
    //初始化请求数据
    this.getData()
    
  },

  mounted() {},

  methods: {
    changePage(){
      this.getData()
      document.documentElement.scrollTop = 0;
    },
    getData(){
       getTopicData({
      page:this.page,
      size:this.size,
      }).then(res=>{
      // console.log(res);
      const {data,totalPages,currentPage}=res.data
      this.dataArr=data
      // console.log(11, this.dataArr);
      this.page=currentPage
      this.pageCount=totalPages
    })
    }
  },
};
</script>
<style lang='less' scoped>
.topic{
  text-align: center;
  font-size: 16px;
  line-height: 2;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  
  h4{
    font-weight: bold;
  }
  img{
    display: block;
    width: 100%;
  }
  .price{
    color:darkred
  }
}
//修改ui组件样式
/deep/ .van-pagination__page-desc{
  display: none;
}
</style>